<template>
    <div class="product">
        <div class="prd-head">
            <search class="prd-search" v-model="searchVal"  changeShow="true" @change="onInput" @iconChange="changePrdList" placeholder="请输入商品名称"> </search>
            <flex-cell 
            :selectTitle="selectTitle"
            :brandList="this.$store.state.prdPage.brandList" 
            :priceSetList="this.$store.state.prdPage.priceSetList"
             @sort="sortChange"
             @select="selectSort"
              v-if="this.$store.state.prdPage.getPrdList.length!=0" 
              >
              </flex-cell>
        </div>


        <div class="product-main"  id="productDiv">
            <div v-if="this.$store.state.prdPage.getPrdList.length!=0 " >
                <van-list
                v-model="loading"
                :finished="finished"
                :offset="100"
                @load="onLoad"
                >
                
                     <prd-list :classChange="classChange" :prdList="this.$store.state.prdPage.getPrdList"  @addCart="addCart" @lookDetail="lookDetail"></prd-list>
                
                     <div class="no-more text-center" v-show="noMore">没有更多商品了...</div> 
                </van-list>
            </div>
            <!--列表空提示信息-->
            <div  class="prd-error-info" v-else>
                <n-error>中国农业银行重庆市分行</n-error>
            </div>
        </div>

    <van-icon  class=" top-icon" :class="{'go-top':scrollNo>280}" name="upgrade"  @click="goTop"/>
    
    </div>
</template>

<script>
import flexCell from './tpl/flexCell'
import search from './../MainIndex/tpl/search'
import prdList from './../MainIndex/tpl/prdList'
import nError from './../error'
import * as api from './../../api/mainIndex'
export default {
    name:'product',
    data(){
        return {
            scrollNo:0,//滚动条
            classChange:this.$store.state.homepage.classChange,  //切换列表样式
            loading:false,
            finished:true,
            noMore:false,  //没有更多
            searchVal:'',
            selectTitle:{
                brand:'品牌',
                priceSet:'价格区间'
            }
            // getPrdList:this.$store.state.prdPage.getPrdList,  //商品列表
        }
    },
    methods:{
        //排序
        sortChange(val){
            let vm = this
            if(val){
                vm.$store.state.prdPage.getPrdList=vm.priceSort(vm.$store.state.prdPage.getPrdList)  //小->大
            }else{
                vm.$store.state.prdPage.getPrdList=vm.priceSort(vm.$store.state.prdPage.getPrdList,'inv') //大->小
            }
        },
        //品牌  价格区间筛选
        selectSort(item,val){
            let vm =this
            if(val=='brand'){
                vm.$store.state.prdPage.brandList.forEach((list,index)=>{
                    if(list.checked){
                        list.checked=false
                    }
                })
                if(item.checked==undefined){
                    vm.$set(item,'checked',true)
                }else{
                    item.checked=true
                }
                vm.selectTitle.brand=item.name
                vm.$store.state.prdPage.dataBody.brands=item.name
            }else if(val=="price"){
                vm.$store.state.prdPage.priceSetList.forEach((list,index)=>{
                    if(list.checked){
                        list.checked=false
                    }
                })
                if(item.checked==undefined){
                    vm.$set(item,'checked',true)
                }else{
                    item.checked=true
                }
                vm.$store.state.prdPage.dataBody.max=item.max
                vm.$store.state.prdPage.dataBody.min=item.min
                vm.selectTitle.priceSet=item.min+'~'+item.max
            }
            vm.init();
            vm.fetchProductList('sort');
        },
        //列表切换样式
        changePrdList(res){
           this.classChange=res;
        },

        //搜索
        onInput(){
            this.$store.state.prdPage.dataBody.keyword=this.searchVal
            this.selectTitle={
                brand:'品牌',
                priceSet:'价格区间'
            }
            this.init();//初始化数据
            this.fetchProductList('init')
        },
        //加入购物车
        addCart(){

        },
        //查看详情
        lookDetail(){
            
        },
        //获得商品
        fetchProductList(val){
            let vm=this;
            api.GetPrdList(this.$store.state.prdPage.dataBody).then(res=>{
                vm.loading=false;
                res.data.result.priceIntervalAggregate?vm.$store.state.prdPage.priceSetList=res.data.result.priceIntervalAggregate :vm.$store.state.prdPage.priceSetList=[] //价格区间
                if(val=='init'){
                    vm.finished=false;
                    // vm.$store.state.prdPage.getPrdList=res.data.result.hitResult;  
                    res.data.result.brandAggregate.brandList?vm.$store.state.prdPage.brandList=res.data.result.brandAggregate.brandList:vm.$store.state.prdPage.brandList=[]    //品牌
                    vm.$store.state.prdPage.getPrdList=vm.priceSort(res.data.result.hitResult,'inv')
                }else if(val=='sort'){
                    vm.finished=false;
                    vm.$store.state.prdPage.getPrdList=res.data.result.hitResult;  
                }else{
                    res.data.result.hitResult.forEach((item,index)=>{
                        vm.$store.state.prdPage.getPrdList.push(item);
                    })
                }
                if(vm.$store.state.prdPage.getPrdList.length>=res.data.result.resultCount){
                    vm.finished = true;
                    vm.noMore=true;
                }else{
                    vm.noMore=false;
                }
            })
        },

        //加载更多
        onLoad() {
            let vm =this;
            vm.$store.state.prdPage.dataBody.pageIndex+=1;
            vm.fetchProductList();
        },
        init(val){
            this.goTop()
            if(val=='all'){
                //清空商品列表
                this.$store.state.prdPage.getPrdList;
                this.$store.state.prdPage.dataBody.pageIndex=1;  
                //保存搜索值
                this.$store.state.prdPage.dataBody.keyword=this.$route.params.keyCode;
                this.searchVal=this.$store.state.prdPage.dataBody.keyword; 
                this.selectTitle={
                    brand:'品牌',
                    priceSet:'价格区间'
                }             
            }else{
                //清空商品列表
                this.$store.state.prdPage.getPrdList;
                this.$store.state.prdPage.dataBody.pageIndex=1;  
                this.$store.state.prdPage.dataBody.max='';  
                this.$store.state.prdPage.dataBody.min='';  
            }
        },
        //排序
        priceSort(data,val){
            if(val=='inv'){
                return data.sort((a,b)=>{return parseFloat(a.price)-parseFloat(b.price)})
            }else{
                return data.sort((a,b)=>{return parseFloat(b.price)-parseFloat(a.price)})
            }
        },
        //滚动位置
        scrollInfo (){
            let vm=this;
            let productDiv = document.getElementById('productDiv');
            productDiv.scrollTop=this.$store.state.prdPage.scrollNo;
            vm.scrollNo=this.$store.state.prdPage.scrollNo;
            productDiv.addEventListener('scroll', ()=>{
                let scrollNum=productDiv.pageYOffset || productDiv.scrollTop || productDiv.scrollTop;
                vm.$store.state.prdPage.scrollNo = scrollNum
                vm.scrollNo=this.$store.state.prdPage.scrollNo;
            });
        },
        //回到顶部
        goTop (){
            let productDiv = document.getElementById('productDiv');
            productDiv.scrollTop=0;
            this.$store.state.prdPage.scrollNo=0;
        }
    },
    mounted(){
        document.title="商品"
        this.scrollInfo()     //滚动位置
    },   
    beforeRouteEnter (to, from, next){
        next(vm => {
            vm.scrollInfo()     //滚动位置
            if(from.name=='searchPage'||from.name=='MenuPage'||from.name==null){
                vm.init('all')
                vm.fetchProductList('init')
                
            };
        })
    },
    components:{
        flexCell,
        search,
        prdList,
        nError
    }
}
</script>


<style  lang="scss">
  .product {
    padding-top:2.28rem;
    overflow-y:auto;
    box-sizing:border-box;
    .prd-head{
        position:fixed;
        top:0;
        width:100%;
        z-index:20;
        background:#fff;
    }
    .prd-search{
        .change-class{
            .change-icon{
                color:#666 !important;
            }
        }          
    }
    .product-main{
        height: 100%;
        overflow: auto;
        .no-more{
            color:#999;
            margin-top:.133333rem;
            padding:.266667rem 0;
        }
    }
    .prd-error-info{
        padding-top:2rem;
    }
    .top-icon{
        position:fixed;
        bottom:-1.8rem;
        left:.28rem;
        font-size:.888rem;
        color:#e4393c;
        z-index:5;
        transition:bottom .2s linear;
    }
    .go-top{
        bottom:1.8rem;
        transition:bottom .2s linear;
    }
  }
</style>
